import './css/index.css';
let ulTitle = document.querySelector('.title');
let ulTitleLi = document.querySelector('.title').getElementsByTagName('li');
let ulMain = document.querySelector('.main');
let ulMainLi = document.querySelector('.main').getElementsByTagName('li');
for (let i = 0; i < ulTitleLi.length; i++) {
  ulTitleLi[i].onclick = function () {
    let siblings1 = Array.from(ulTitle.children).filter(
      (child) => child !== ulTitle
    );
    siblings1.forEach((sibling) => sibling.classList.remove('active-title'));
    ulTitleLi[i].classList.add('active-title');
    let siblings2 = Array.from(ulMain.children).filter(
      (child) => child !== ulMain
    );
    siblings2.forEach((sibling) => sibling.classList.remove('active-main'));
    ulMainLi[i].classList.add('active-main');
    //   siblings2.forEach((sibling) => (sibling.style.display = "none"));
    //   ulMainLi[i].style.display = "block";
  };
}
